<template>
  <div class="sgh-select">
    <Label :value="label" :name="name" />
    <select
      :name="name"
      :placeholder="placeholder"
      :id="name"
      :value="defaultValue"
      v-html="getOptions()"
    ></select>
  </div>
</template>

<script>
import Label from "@/components/Label/index.vue";

export default {
  props: ["label", "name", "option", "placeholder", "defaultValue"],
  components: {
    Label,
  },
  methods: {
    getOptions() {
      let res = ``;
      if (Array.isArray(this.option)) {
        this.option.forEach((item, index) => {
          res += `<option value="${item.val}">${item.lab}</option>`;
        });
      }
      return res;
    },
  },
};
</script> 

<style lang="scss">
$part-bg-color: #2d3838;
$theme-green-color: #48aa4e;
$font-color: #999;
$border-gray-color: #474747;
$global-black-bg-color: #37404a;
.sgh-select {
  select {
    height: 32px;
    outline: none;
    border: none;
    background-color: $part-bg-color;
    border: 1px solid $border-gray-color;
    border-radius: 4px;
    color: $font-color;
    font-size: 8px;
    cursor: pointer;

    &:hover {
      border-color: $theme-green-color;
    }
    &:focus {
      border-color: $theme-green-color;
      box-shadow: 0 0 3px 0 $theme-green-color;
    }
  }
}
</style>